<template>
  <div id="flight">
    <div class="querys">
    	<div class="dept">
    		<p class="tag">出发城市</p>
    		<FlightCityInput v-model="query.deptCity"/>
    	</div>
    	<div @click="ex">
    		<span class='iconfont'>&#xe61c;</span>
    	</div>
    	<div class="arr">
    		<p class="tag">达到城市</p>
    		<FlightCityInput v-model="query.arrCity"/> 		
    	</div>
    </div>
    <div class="dateWarp">
    	<el-date-picker	      
	      type="date"
	      class="date"
	      v-model="query.deptStartDate"
	      size="small"
	      placeholder="选择日期">
	    </el-date-picker>
    </div>
    <div class="btnWarp">
    	<el-button @click="search" class="search" type="primary">搜索</el-button>
    </div>
  </div>
</template>

<script>
import { formDate } from '@/utils/util'
import FlightCityInput from '@/components/Flight-city'
export default {
  data () {
    return {
    	deptCityModal:false,
    	arrCityModal:false,
      query:{
      	deptCity:'北京(BJS)',
      	arrCity:'上海(SHA)',
      	deptStartDate:new Date()
      }
    }
  },
  methods:{
  	search(){
  		this.query.deptStartDate = formDate(this.query.deptStartDate);
  		this.$router.push({path:'/flight',query:this.query})
  	},
  	ex(){
  		let ex = this.query.deptCity;
  		this.query.deptCity = this.query.arrCity;
  		this.query.arrCity = ex;
  	},
  	
  },
  components:{
  	FlightCityInput,
  },
  created(){
  	
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
@import "../../../style/mixin.scss";
#flight{
	display:flex;
	flex-direction:column;
	height:100%;
	.querys{
		@include fj();
		.dept,.arr{
			flex:1;
		}
		.tag{
			font-size: 12px;
			color:#95a7b3;
			margin-bottom: 8px;
		}
		.iconfont{
			font-size: 22px;
			color:red;
			cursor: pointer;
			display: inline-block;
			transform: translateY(25px);
			margin:0 12px;
			user-select: none;
		}
	}
	.dateWarp{
		margin-top:10px;
		.date{
			width:100%;
		}
	}
	.btnWarp{
		flex:1;
		display:flex;
		justify-content:flex-end;
		align-items:flex-end;
		.search{
			width:150px;
			height:42px;
			background: $blue;
		}
	}
}
</style>
